<template>
    <div>
        <div style="width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;">
            <a-card v-for="item in roomStateDictOptions" :key="item.value" style="width: 20%; margin: 10px"
                :title="item.title + '(' + item.value + ')'" :bodyStyle="{ padding: 0 }">
                <ChromeColor slot="cover" v-model="roomStateBackgroundColor[item.value]" style="width: 100%;" />
                <template slot="actions" class="ant-card-actions">
                    <a-button @click="setCustom(item.value)">确定</a-button>
                    <a-button @click="setDefault(item.value)">恢复默认</a-button>
                </template>
            </a-card>
        </div>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import { Chrome } from 'vue-color'
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
import { defaultRoomColor } from '../defaultRoomColor'

export default {
    name: 'RoomColorList',
    components: {
        ChromeColor: Chrome
    },
    data() {
        return {
            roomStateBackgroundColor: null,
            roomStateDictOptions: [],
            colorSelect: 'red',
            defaultColor: defaultRoomColor
        }
    },
    mounted() {
        this.getRoomState()
    },
    created() {
        this.initDictConfig()
    },
    methods: {
        getRoomState() {
            const st = localStorage.getItem('roomStateBackgroundColor')
            if (st) {
                this.roomStateBackgroundColor = JSON.parse(st)
            } else {
                this.roomStateBackgroundColor = Object.assign({}, this.defaultColor)
            }
        },
        ...mapActions(['SetRoomStateBackgroundColor']),
        initDictConfig() {
            //初始化字典 - room_state
            initDictOptions('room_state').then((res) => {
                if (res.success) {
                    this.roomStateDictOptions = res.result;
                }
            });
        },
        setCustom(value) {
            this.roomStateBackgroundColor[value] = this.roomStateBackgroundColor[value].hex
                ? this.roomStateBackgroundColor[value].hex
                : this.roomStateBackgroundColor[value]
            this.SetRoomStateBackgroundColor(this.roomStateBackgroundColor)
        },
        setDefault(value) {
            this.roomStateBackgroundColor[value] = this.defaultColor[value]
            this.SetRoomStateBackgroundColor(this.roomStateBackgroundColor)
        }
    }
}
</script>